<template>
  <transition name="el-fade-in-linear" @after-leave="handleAfterLeave">
    <div
      v-show="visible"
      class="nx-preview"
    >
      <i @click="close" class="el-icon-close nx-preview__close"></i>
      <i @click="prev" class="el-icon-arrow-left nx-preview__prev"></i>
      <i @click="next" class="el-icon-arrow-right nx-preview__next"></i>
      <div class="nx-preview__pagination">
        {{ active + 1 }} / {{ source.length }}
      </div>
      <template v-if="/\.(jpg|bmp|gif|ico|pcx|jpeg|tif|png|raw|tga)$/.test(source[active].toLowerCase())">
        <img class="nx-preview__image" :src="source[active]" alt="图片预览">
      </template>
      <template  v-else-if="/\.(swf|avi|flv|mpg|rm|mov|wav|asf|3gp|mkv|rmvb|mp4)/.test(source[active].toLowerCase())">
        <video class="nx-preview__video" :src="source[active]" controls></video>
      </template>
      <template v-else-if="/\.(ogg|mp3|wav)/.test(source[active].toLowerCase())">
        <audio class="nx-preview__audio" :src="source[active]" controls></audio>
      </template>
    </div>
  </transition>
</template>

<script lang='ts'>
import { defineComponent, PropType, getCurrentInstance, ref } from 'vue';

export default defineComponent({
  props: {
    source: {
      type: Array as PropType<string[]>,
      default: () => []
    },
    current: {
      type: Number as PropType<number>,
      default: () => 0
    }
  },
  setup(props) {
    const instance = getCurrentInstance();
    // eslint-disable-next-line vue/no-setup-props-destructure
    const { source, current } = props;
    const active = ref(current);
    const visible = ref(true);

    const next = () => {
      active.value += 1;
      if (active.value >= source.length) {
        active.value = 0;
      }
    };
    const prev = () => {
      active.value -= 1;
      if (active.value < 0) {
        active.value = source.length - 1;
      }
    };
    const close = () => {
      visible.value = false;
    };

    const handleAfterLeave = () => {
      const el: Node = (instance?.vnode.el as any).parentnode;
      const parentNode: any = el.parentNode;
      parentNode.removeChild(el);
    };
    return {
      handleAfterLeave,
      next,
      prev,
      close,
      visible,
      active
    };
  }
});
</script>
<style lang="scss" scope>
.nx-preview{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  .nx-preview__close{
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 32px;
    color: #fff;
  }
  .nx-preview__prev{
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    color: #fff;
  }
  .nx-preview__next{
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    color: #fff;
  }
  .nx-preview__pagination{
    position: absolute;
    bottom: 20px;
    color: #fff;
    font-size: 22px;
    left: 50%;
    transform: translateX(-50%)
  }
  .nx-preview__image,
  .nx-preview__video,
  .nx-preview__audio {
    max-width: 100%;
    max-height: 100%;
  }
}
</style>
